<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <!--v-for-->
        <h1>v-for="b in book"方式迭代，b是json的值</h1>
        <ul>
            <li v-for="b in book">
                {{b}}
            </li>
        </ul>
        <hr>
        <h1>v-for="(v,k) in book"方式迭代,其中v是值，k是键</h1>
        <ul>
            <li v-for="(v,k) in book">
                {{v}}--{{k}}
            </li>
        </ul>
        <hr>
        <h1>v-for="(v,k) in books"方式迭代[{},{}]结构,其中v是json对象{}，index是下标</h1>
        <ul>
            <li v-for="(v,index) in books">
                数组中的下标为：{{index}}的对象
               <p v-for="(b,k,index) in v">
                   {{b}}--{{k}}---{{index}}
               </p>
            </li>
        </ul>

    </div>

    <script>
       // document.getElementById("app").innerHtml="";

        //1,构建Vue实例
        var app =  new Vue({
            el:"#app",//容器的id
            data:{ //定义数据
                message:"helloworld!!",
                book:{"name":"java入门",author:"张三",price:100},
                books:[{"name":"java入门",author:"张三",price:100},
                    {"name":"java入门2",author:"li",price:110},
                    {"name":"java入门3",author:"张三",price:120}]
            }
        });

    </script>

</body>
</html>